//------------------------------------------------------------------------------
// 个人中心-修改密码组件
//------------------------------------------------------------------------------
<script setup name="userModifyPassword">
import { shallowRef,ref } from 'vue';
const { isShowDialog }  = defineProps({
    isShowDialog: {
        type: Boolean,
        default: false,
    },
    oldPassword: {
        type: String,
        default: '',
    }
})
const oldPassword = shallowRef('');
const newPassword = shallowRef('');

const errObj = ref({
    oldPasswordErr: "",
    newPasswordErr: "",
    confirmPasswordErr: "",
});


const oldPasswordInput = (event) => {
    if(event.target.value === '') {
        errObj.value.oldPasswordErr = '原密码不能为空';
        return;
    }
    if(event.target.value !== oldPassword.value) {
        errObj.value.oldPasswordErr = '原密码不正确';
        return;
    }
    errObj.value.oldPasswordErr = '';
}

const newPasswordInput = () => {
    if (newPassword.value === '') {
        errObj.value.newPasswordErr = '新密码不能为空';
        return;
    }
    if(/^(?=.*[A-Za-z])(?=.*\d).{6,20}$/.test(newPassword.value) === false){
        errObj.value.newPasswordErr = '密码需包含字母和数字，长度6-20位';
        return;
    }
    errObj.value.newPasswordErr = '';
}

const confirmPasswordInput = (event) => {
    if(event.target.value === '') {
        errObj.value.confirmPasswordErr = '确认密码不能为空';
        return;
    }
    if(event.target.value !== newPassword.value) {
        errObj.value.confirmPasswordErr = '两次输入的密码不一致';
        return;
    }
    errObj.value.confirmPasswordErr = '';
}
</script>

<template>
    <div class="userModifyPassword">
        <el-dialog 
        :model-value="isShowDialog" 
        width="40%" 
        top="20vh"
        :show-close="false"
        :open-delay="100"
        :close-on-click-modal="false"
        >
        <!-- 标题部分 -->
            <template #header>
                <div class="dialogTitle">
                    <div class="line"></div>
                    <div>修改密码</div>
                </div>
            </template>
            <!-- 内容部分 -->
            <template #default>
                <div class="dialogContent">
                    <div class="oldPassword">
                        <!-- 内容的标题 -->
                        <div class="title">
                            <span>原密码：</span>
                        </div>
                        <!-- 内容的输入框 -->
                        <div class="inputPart">
                            <input 
                            type="text"
                            @keyup.enter="oldPasswordInput"
                            @blur="oldPasswordInput"
                            >
                            <div class="err">{{ errObj.oldPasswordErr }}</div>
                        </div>
                    </div>
                    <div class="newPassword">
                        <div class="title">
                            <span>新密码：</span>
                        </div>
                        <div class="inputPart">
                            <input 
                            type="text" 
                            v-model="newPassword" 
                            @keyup.enter="newPasswordInput"
                            @blur="newPasswordInput"
                            >
                            <div class="err">{{ errObj.newPasswordErr }}</div>
                        </div>
                    </div>
                    <div class="confirmPassword">
                        <div class="title">
                            <span>确认密码：</span>
                        </div>
                        <div class="inputPart">
                            <input 
                            type="text"
                            @keyup.enter="confirmPasswordInput"
                            @blur="confirmPasswordInput"
                            >
                            <div class="err">{{ errObj.confirmPasswordErr }}</div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="save" @click="$emit('ModifySave', newPassword)">保存</div>
                        <div class="cancel" @click="$emit('ModifyCancel')">取消</div>
                    </div>
                </div>
            </template>
        </el-dialog>        
    </div>
</template>

<style scoped lang="scss">

.dialogTitle{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    font-weight: 500;
    .line{
        width: 4px;
        height:20px;
        border-radius: 2px;
        background-color: #2d5cf6;
    }
}
.dialogContent{
    width: 100%;
    padding-left: 5px;
    display: flex;
    flex-direction: column;
    gap: 5vh;
    font-weight: 500;
    .oldPassword, .newPassword, .confirmPassword{
        width: 100%;
        display: flex;
        align-items: center;
        .title{
            width: 90px;
            &::before{
                content: '*';
                color: red;
            }          
        }
        .inputPart{
            position: relative;
            input{
                width: 230px;
                height: 3.5vh;
                border: none;
                border-radius: 3px;
                background-color: #f2f3f5;
                text-indent: 5px;
                &:focus{
                    outline: none;
                    border: 1px solid #2d5cf6;
                }
            }
            .err{
                position: absolute;
                top: 3.5vh;
                left: 0;
                font-size: 10px;
                color: red;
            }
        }
    }
    .footer{
        width: calc(15vw + 90px);
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap:40px;
        font-weight: 400;
        font-size: 12px;
        .save{
            width: 5vw;
            height: 3vh;
            border-radius: 3px;
            background-color: #d2453e;
            text-align: center;
            line-height: 3vh;
            color:white;
        }
        .cancel{
            width: 5vw;
            height: 3vh;
            border-radius: 3px;
            background-color: #f2f3f5;
            text-align: center;
            line-height: 3vh;
        }
    }
}
</style>